<template>
  <div class="bg_write" style="position:relative">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-row class="home">
      <el-col :span="24" class="home_box">
        <div class="phone">
          <div class="phone_top" style="height:auto">
            <div class="phone_header">
              <img src="./../../../assets/img/home/phone_header.png" alt />
            </div>
            <div
              class="phone_top_img"
              @click="show_btn(2)"
              :style="{'background': headList.banner&&headList.banner.length == 0?'#f4f4f4':'url('+$fnc.getImgUrl(headList.banner[0].piclink)+') no-repeat center top/100% 100% '}"
            >
              <div class="phone_top_search">
                <div class="phone_top_search_middle">
                  <el-input
                    v-model="search_input"
                    size="small"
                    placeholder="精选好房"
                    style="text-align:center"
                  ></el-input>
                </div>
              </div>
              <div class="phone_top_word" v-if="searchList != undefined && searchList.length > 0">
                <div>
                  <div>
                    <span v-if="searchList[0]">{{searchList[0].title}}</span>
                    <span v-if="searchList[1]">{{searchList[1].title}}</span>
                    <span v-if="searchList[2]">{{searchList[2].title}}</span>
                    <span v-if="searchList[3]">{{searchList[3].title}}</span>
                    <span v-if="searchList[4]">{{searchList[4].title}}</span>
                  </div>
                </div>
              </div>
              <div class="index_control index_head" v-show="search_show">
                <div
                  class="control_item control_sanjiao on"
                  style="margin-top:70px"
                  v-show="search_show"
                >
                  <el-form>
                    <el-form-item label="背景图片：" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <uploadpic
                          :piclink="headList.banner[0].piclink"
                          :width="300"
                          :height="160"
                          :real_width="640"
                          :real_height="344"
                          :is_more="false"
                          @send_pic="loadSuccess_bj"
                        ></uploadpic>
                      </el-col>
                    </el-form-item>

                    <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="carousel">
              <div class="block" style="z-index: 10" @click="show_btn(3)">
                <el-carousel trigger="click" height="200px" style="z-index: 10;">
                  <el-carousel-item v-for="(item,index) in bannerList.banner" :key="index">
                    <img :src="$fnc.getImgUrl(item.piclink)" alt />
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div
                class="index_control index_head"
                v-show="carousel_show"
                style="margin-top: 180px"
              >
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-switch
                          v-model="bannerList.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          class="hone_switch"
                          :width="70"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                    </el-form-item>
                    <upcard
                      class="banner"
                      @sendDel="getSendDel"
                      @send_baner_id="get_banner_id"
                      :data="bannerList.banner"
                      :cart="list_card"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
          <div class="phone_menu" @click="show_btn(4)">
            <div class="phone_menu_body">
              <div class="phone_menu_item" v-for="(item,i) in menuList.banner" :key="i">
                <div class="phone_menu_item_icon">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="index_control index_head" v-show="menu_show">
              <div class="control_item control_sanjiao on">
                <el-form>
                  <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                    <el-col :span="12">
                      <el-switch
                        v-model="menuList.is_show"
                        active-color="#13ce66"
                        inactive-color="#999999"
                        class="hone_switch"
                        :width="70"
                        active-value="1"
                        inactive-value="0"
                      ></el-switch>
                    </el-col>
                    <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                  </el-form-item>
                  <upcard
                    class="menu"
                    @sendDel="getSendDel"
                    @send_baner_id="get_banner_id"
                    :data="menuList.banner"
                    :cart="list_menu"
                    :is_index="true"
                  ></upcard>
                </el-form>
              </div>
            </div>
          </div>
          <div class="phone_part" @click="show_btn(5,Item)" v-for="(Item,y) in partList" :key="y">
            <div class="phone_part_body">
              <div class="phone_title" v-show="Item.title != ''">
                <p>
                  {{Item.title}}
                  <span>{{Item.title_en}}</span>
                </p>
              </div>
              <div class="phone_part_content" v-if="Item.style == 0">
                <div class="phone_part_one_img" v-for="(item,i) in Item.banner" :key="i">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
              </div>
              <div class="phone_part_content" v-else-if="Item.style == 1">
                <div class="phone_part_two_img" v-for="(item,i) in Item.banner" :key="i">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
              </div>
              <div class="phone_part_content" v-else-if="Item.style == 2">
                <div class="phone_part_three_img" v-for="(item,i) in Item.banner" :key="i">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
              </div>
              <div class="phone_part_content" v-else-if="Item.style == 3">
                <div class="phone_part_four_img" v-for="(item,i) in Item.banner" :key="i">
                  <img :src="$fnc.getImgUrl(item.piclink)" alt />
                </div>
              </div>
              <div class="index_control index_head" v-show="Item.part_show">
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-switch
                          v-model="Item.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          hone_switch
                          :width="70"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red">
                        <el-button
                          :loading="$store.state.isLoading"
                          type="danger"
                          size="small"
                          @click="del_part(Item.id,y)"
                        >删除</el-button>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="主标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="Item.title" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="副标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="Item.title_en" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="Item.sort"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="样式选择" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-select v-model="Item.style" placeholder="请选择">
                          <el-option
                            v-for="item in style_option"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-col>
                    </el-form-item>
                    <upcard
                      class="module"
                      @sendDel="getSendDel(y)"
                      @send_baner_id="get_banner_id"
                      :data="Item.banner"
                      :cart="list_card"
                      :is_index="true"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
          <div class="bg_con add_banner" @click="add_part">
            <i class="el-icon-plus"></i>
          </div>
          <!-- <div class="phone_shop" @click="show_btn(6)">
            <div class="phone_shop_body">
              <div class="phone_title_shop">
                <div class="phone_title_left">
                  <p>
                    {{shopList.title}}
                    <span>{{this.shopList.title_en}}</span>
                  </p>
                </div>
                <div class="phone_title_right">
                  <p class="phone_subtitle">More +</p>
                </div>
              </div>
              <div class="phone_shop_content">
                <div class="phone_shop_left">
                  <div
                    class="phone_shop_item"
                    v-for="(item,i) in judge(this.shopList.pro,'odd')"
                    :key="i"
                  >
                    <div class="shop_item_top">
                      <img :src="$fnc.getImgUrl(shopList.pro[item].piclink)" alt />
                    </div>
                    <div class="shop_item_title">
                      <p>{{shopList.pro[item].title}}</p>
                    </div>
                    <div class="shop_item_label">
                      <p v-html="shopList.pro[item].label"></p>
                    </div>
                    <div class="shop_item_price">
                      <p>￥{{shopList.pro[item].price |toFix}}</p>
                      <p>{{shopList.pro[item].sale}}人付款</p>
                    </div>
                  </div>
                </div>
                <div class="phone_shop_right">
                  <div class="phone_shop_item" v-for="item in judge(this.shopList.pro)" :key="item">
                    <div class="shop_item_top">
                      <img :src="$fnc.getImgUrl(shopList.pro[item].piclink)" alt />
                    </div>
                    <div class="shop_item_title">
                      <p>{{shopList.pro[item].title}}</p>
                    </div>
                    <div class="shop_item_label">
                      <p v-html="shopList.pro[item].label"></p>
                    </div>
                    <div class="shop_item_price">
                      <p>￥{{shopList.pro[item].price |toFix}}</p>
                      <p>{{shopList.pro[item].sale}}人付款</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="index_control index_head" v-show="shopListShow">
                <div class="control_item control_sanjiao on">
                  <el-form>
                    <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                      <el-col :span="12">
       
                        <el-switch
                          v-model="shopList.is_show"
                          active-color="#13ce66"
                          inactive-color="#999999"
                          :width="70"
                          class="hone_switch"
                          active-value="1"
                          inactive-value="0"
                        ></el-switch>
                      </el-col>
                      <el-col :span="12" class="tr pd_right_15 sizeColor_red"></el-col>
                    </el-form-item>
                    <el-form-item label="主标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="shopList.title" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="副标题" :label-width="formLabelWidth">
                      <el-col :span="12">
                        <el-input v-model="shopList.title_en" autocomplete="off"></el-input>
                      </el-col>
                    </el-form-item>
                    <upcard
                      @setId="setId"
                      :is_index="true"
                      class="shop shop"
                      @sendDel="getSendDel"
                      :data="shopList.pro"
                      :cart="list_item"
                    ></upcard>
                  </el-form>
                </div>
              </div>
            </div>
          </div>-->
          <!-- <div class="phone_copyright" @click="show_btn(8)">
            <div class="phone_copyright_box">
              <p>{{(copyright !='' ? copyright : '请输入版权信息' )}}</p>
            </div>
            <div class="index_control index_head" v-show="copyright_show">
              <div class="control_item control_sanjiao on">
                <el-form>
                  <el-col :span="12"></el-col>
                  <el-form-item label="版权信息：" :label-width="formLabelWidth">
                    <el-col :span="14">
                      <el-input
                        type="text"
                        :rows="6"
                        clearable
                        placeholder="请输入版权信息"
                        v-model="copyright"
                        autocomplete="off"
                      ></el-input>
                    </el-col>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>-->
          <!-- <div class="phone_bottom" @click="show_btn(7)">
            <div class="phone_bottom_box">
              <div class="phone_bottom_item" v-for="footer in footerList" :key="footer.id">
                <div class="phone_bottom_item_img">
                  <van-icon :name="footer.piclink" />
                </div>
                <p>{{footer.title}}</p>
              </div>
            </div>
            <div class="index_control index_head" v-show="footer_show">
              <div class="control_item control_sanjiao on">
                <el-form>
                  <el-col :span="12"></el-col>
                  <upcard
                    class="footer"
                    @sendDel="getSendDel"
                    @send_baner_id="get_banner_id"
                    :data="footerList"
                    :cart="list_footer"
                    :is_index="true"
                  ></upcard>
                </el-form>
              </div>
            </div>
          </div>-->
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="save" @keydown.13="save">保存</el-button>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import myUpload from "@/components/currency/MyUpload.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
import uploadpic from "@/components/page/pic/up_pic";
import { Search } from "vant";
export default {
  name: "new_home",
  components: {
    HeadTitle,
    myUpload,
    upcard,
    uploadpic,
    [Search.name]: Search
  },
  data() {
    return {
      header_iconList: [
        {
          title: "",
          id: ""
        },
        {
          title: "",
          id: ""
        }
      ],
      is_show_cate: "",
      copyright: "",
      action: this.$route.query.action,
      del_banner: "",
      del_module: "",
      list_footer: "list_footer",
      list_item: "list",
      list_menu: "list_menu",
      list_card: "list_card",
      menuListShow: 1,
      copyright_show: false,
      footer_show: false,
      shopListShow: false,
      ad_show: false,
      menu_show: false,
      carousel_show: false,
      search_show: false,
      header_show: false,
      top_del: {
        del_top_banner: [],
        del_top_menu: [],
        del_top_brand: [],
        del_top_day: [],
        del_top_find: [],
        del_top_list: [],
        del_top_shopList: [],
        del_top_adv: []
      },
      style_option: [
        {
          label: "1行1图",
          value: "0"
        },
        {
          label: "1行2图",
          value: "1"
        },
        {
          label: "1行3图",
          value: "2"
        },
        {
          label: "1+2",
          value: "3"
        }
      ],
      del_item: {
        delbannerList: [],
        delmenuList: [],
        delshopList: [],
        delpartList: []
      },
      //商品详情
      shopList: {
        is_show: "1",
        title: null,
        title_en: null,
        types: "product",
        pro: [
          {
            title: ""
          }
        ]
      },

      add_part_item: {
        id: "",
        is_show: "1",
        part_show: false,
        title: "主标题",
        title_en: "副标题",
        style: "0",
        types: "module",
        banner: [
          {
            id: "",
            cate: null,
            title: null,
            piclink: "",
            links: null,
            show: "",
            desc: ""
          }
        ]
      },

      // 模块
      partList: [
        {
          banner: [
            {
              piclink: "",
              title: ""
            }
          ],
          title: "",
          title_en: ""
        }
      ],
      footerList: [
        {
          title: "",
          id: ""
        }
      ],
      //菜单选项
      menuList: {
        banner: [
          {
            title: null,
            piclink: null
          }
        ]
      },
      //轮播图
      bannerList: {
        banner: [
          {
            id: null,
            title: null,
            piclink: null
          }
        ]
      },

      //头部背景
      headList: {
        id: "",
        iden: "",
        is_show: "1",
        title: "",
        title_en: "",
        style: "0",
        types: "background",
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: ""
          }
        ]
      },

      //头部文件
      topList: {
        title: "",
        logo: ""
      },
      searchList: [
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" },
        { title: "" }
      ],
      search_input: "",
      formLabelWidth: "120px"
    };
  },
  created() {
    this.get_info();
  },
  methods: {
    loadSuccess_bj(pic) {
      //上传图片
      if (this.headList.banner.length == 0) {
        this.headList.banner.push({ piclink: "" });
      }
      this.headList.banner[0].piclink = pic;
    },
    onSuccess_logo(pic) {
      this.topList.logo = pic;
    },
    get_banner_id(item) {
      if (item.id != 0 && item.id != undefined) {
        this.del_banner += item.id + "@";
      }
    },
    setId(od) {
      this.$api.getPage
        .change_shop({ id: od, iden: this.$route.query.action })
        .then(res => {});
    },
    del_part(id, num) {
      //删除模块
      var temp = {};
      this.partList[num].part_show = false;
      this.partList.splice(num, 1);
      if (id != 0) {
        this.del_module += id + "@";
      }
    },
    add_part() {
      this.partList.push({
        id: "0",
        iden: this.$route.query.action,
        is_show: "1",
        part_show: false,
        title: "",
        title_en: "",
        style: "0",
        types: "module",
        sort:'0',
        banner: [
          {
            id: "",
            cate: "",
            title: "",
            piclink: "",
            links: "",
            desc: "",
            sort:'0',
          }
        ]
      });
    },
    save() {
      var temp = {};
      temp.iden = this.$route.query.action;
      temp.head = this.topList.title;
      temp.logo = this.topList.logo;

      temp.background = JSON.stringify(this.headList);
      temp.slide = JSON.stringify(this.bannerList);
      temp.navigation = JSON.stringify(this.menuList);
      temp.module = JSON.stringify(this.partList);

      var sort_str = "";
      this.shopList.pro.forEach(item => {
        sort_str = sort_str + item.id + "@";
      });
      let shop_List = {};
      shop_List = this.shopList;
      shop_List.pro = [];
      temp.product = JSON.stringify(shop_List);
      temp.del_module = this.del_module;
      temp.del_banner = this.del_banner;
      temp.footer = JSON.stringify(this.footerList);
      temp.copyright = this.copyright;
      temp.is_show_cate = this.is_show_cate;
      temp.header = JSON.stringify(this.header_iconList);
      this.$api.getPage.changeindex(temp).then(res => {
        if (res.data.code == 200) {
          this.$api.getPage
            .change_shopsort({ sort_str: sort_str })
            .then(res => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess("");
                this.get_info();
              }
            });
        }
      });
    },
    Initialize_array() {
      this.topList = { title: "", logo: "" };
      this.headList = {
        id: "",
        iden: "",
        is_show: "1",
        title: "",
        title_en: "",
        style: "0",
        types: "background",
        banner: [
          { id: "", cate: "", title: "", piclink: "", links: "", desc: "" }
        ]
      };
      this.bannerList = { banner: [{ id: null, title: null, piclink: null }] };
      this.menuList = { banner: [{}] };
      this.footerList = [];
      this.partList = [{ banner: [{ piclink: "" }] }];
      this.shopList = {
        is_show: "1",
        title: null,
        title_en: null,
        types: "product",
        pro: []
      };
    },
    get_info() {
      this.Initialize_array();
      this.$api.getEstate
        .getEstateIndex({ iden: this.$route.query.action })
        .then(res => {
          if (res.data.code == 200) {
            // this.topList.title = res.data.result.head;
            // this.topList.logo = res.data.result.logo;
            if (res.data.result.info.background.banner.length == 0) {
              this.headList = { banner: [{ piclink: "" }] };
            } else {
              this.headList = res.data.result.info.background;
            }

            this.bannerList = res.data.result.info.slide;
            this.menuList = res.data.result.info.navigation;
            this.shopList = res.data.result.info.product;
            this.partList = res.data.result.module;
            this.footerList = res.data.result.footer;
            this.searchList = res.data.result.product_cate;
            this.copyright = res.data.result.copyright;
            this.is_show_cate = res.data.result.is_show_cate;
            this.header_iconList = [];

            // this.header_iconList.push(res.data.result.header[0]);
            // this.header_iconList.push(res.data.result.header[1]);
          }
        });
    },
    homeAdd() {
      //写入数据库
    },
    judge(args, flag) {
      //奇偶数判断
      var odd = [];
      var even = [];
      var length = args.length || 0;
      for (var i = 0; i <= length - 1; i++) {
        if (i % 2 == 0) {
          odd.push(i);
        } else {
          even.push(i);
        }
      }
      if (flag == "odd") {
        return odd;
      } else {
        return even;
      }
    },
    getSendDel(obj, index, id) {
      console.log(obj);
      if (obj.id == 0 || obj.id == undefined) return;
      switch (obj.title) {
        case "banner":
          this.del_item.delbannerList.push(obj.id);
          break;
        case "menu":
          this.del_item.delmenuList.push(obj.id);
          break;
        case "shop":
          this.del_item.delshopList.push(obj.id);
          this.$api.getPage.del_shop({ id: obj.id }).then(res => {});
          break;
        case "module":
          this.del_item.delpartList.push(obj.id);
          break;
        case "footer":
          this.del_item.delpartList.push(obj.id);
          break;
      }
    },

    del_headerbj() {
      //删除背景图片
      this.headList.piclink = "";
    },

    show_btn(id, Item) {
      //显示 修改窗口按钮
      this.search_show = false;
      this.header_show = false;
      this.carousel_show = false;
      this.menu_show = false;
      this.ad_show = false;
      this.partList.forEach(function(item) {
        item.part_show = false;
      });
      this.shopListShow = false;
      this.footer_show = false;
      this.copyright_show = false;
      switch (id) {
        case 1:
          this.header_show = true;
          break;
        case 2:
          this.search_show = true;
          break;
        case 3:
          this.carousel_show = true;
          break;
        case 4:
          this.menu_show = true;
          break;
        case 5:
          Item.part_show = true;
          break;
        case 6:
          this.shopListShow = true;
          break;
        case 7:
          this.footer_show = true;
          break;
        case 8:
          this.copyright_show = true;
          break;
      }
    }
  },
  watch: {
    //查询参数改变，再次执行数据获取方法
    $route(to, from) {
      this.Initialize_array();
      this.get_info();
    }
  },
  filters: {
    toFix(val) {
      return parseFloat(val).toFixed(2);
    }
  }
};
</script>

<style scoped>
.home {
  padding: 20px 20px 22px;
  background: #fff;
  margin-bottom: 80px;
}
.home_box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.phone {
  width: 375px;
  background-color: #f4f4f4;
  margin-left: 50px;
  margin-top: 50px;
  position: relative;
  border: 1px solid #e2e2e2;
}
.phone_top {
  width: 100%;
  background-color: #fff;
  /* height: auto !important; */
}
.phone_header {
  width: 100%;
  height: 75px;
  position: relative;
  border: 1px solid transparent;
}
.phone_header p {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 15px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
}
.phone_header img {
  width: 100%;
  /*z-index: 5;*/
}
.phone_header:hover,
.phone_header:active {
  border: 1px dashed red;
  cursor: pointer;
}

/**************顶部背景图片****************/
.phone_top_img {
  width: 100%;
  height: 200px;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
}
.phone_top_img:hover {
  border: 1px dashed red;
}
.phone_top_search {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 6;
  padding-top: 10px;
}
.phone_top_search_left {
  width: 13%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.phone_top_search_right {
  width: 13%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.phone_top_search_middle {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.phone_top_search_middle input {
  width: 95%;
  border: none;
  border-radius: 20px;
  text-indent: 12px;
}

.phone_top_search_middle i {
  font-size: 18px;
  color: #8b8b8b;
  line-height: 36px;
  text-indent: 16px;
  font-weight: bold;
}
.phone_top_search_left span,
.phone_top_search_right span {
  height: 14px;
  line-height: 14px;
  font-size: 12px;

  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.9);
}
.phone_top_search_i1 {
  /****有背景图样式 i*****/
  font-size: 22px;
  color: #000000;
  z-index: 10;
}
.phone_top_search_i2 {
  /****有背景图样式 i*****/
  font-size: 22px;
  color: #ffffff;
  z-index: 10;
  width: 30px;
}
.phone_top_search_span1 {
  /**** 有背景图样式 span*****/
  color: #000000;
  z-index: 10;
}
.phone_top_search_span2 {
  /**** 有背景图样式 span*****/
  color: #ffffff;
  z-index: 10;
}
.phone_top_search_icon {
  color: #000;
}

.phone_top_search_red {
  width: 30px;
}
.phone_top_search_red img {
  width: 100%;
}
/**************热搜关键词*************/
.phone_top_word {
  width: 90%;
  margin: 0 auto;
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 6px 0;
}
.phone_top_word_p1 {
  font-size: 14px;
  color: #000000;
  z-index: 6;
}
.phone_top_word_p2 {
  width: 10%;
  font-size: 14px;
  color: #ffffff;
  z-index: 6;
}

.phone_top_word > div {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}
.phone_top_word > div > div {
  width: 200%;
  height: 20px;
  position: absolute;
  left: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* for Chrome */
.phone_top_word > div > div::-webkit-scrollbar {
  display: none;
}
.phone_top_word span {
  font-size: 12px;
  color: #fff;
  padding: 3px 12px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  z-index: 6;
  margin-right: 5px;
}
/***************轮播图**********************/
.carousel {
  width: 90%;
  height: 200px;
  left: 0;
  right: 0;
  margin: -125px auto 0 auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  border: 1px solid transparent;
}
.carousel:hover {
  border: 1px dashed red;
}
.carousel img {
  width: 100%;
  height: 100%;
}

.phone_menu {
  width: 100%;
  margin: 0 auto 0 auto;
  background-color: #fff;
  border-radius: 5px;
  height: auto;
  z-index: 10;
  padding: 15px 18px 15px 18px;
  position: relative;
  border: 1px solid transparent;
}
.phone_menu:hover {
  border: 1px dashed red;
}

.phone_menu_body {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.phone_menu_item {
  width: 20%;
  height: 70px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
}
.phone_menu_item_icon {
  height: 60%;
}
.phone_menu_item_icon img {
  height: 100%;
}
.phone_menu_item span {
  font-size: 12px;
  color: #333333;
  padding-bottom: 5px;
}

.phone_part {
  width: 100%;
  background-color: white;
  padding: 15px 0;
  position: relative;
  border: 1px solid transparent;
}
.phone_part_body {
  width: 90%;
  margin: 0 auto;
}
.phone_part:hover {
  border: 1px dashed red;
}
.phone_title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}
.phone_title p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
}
.phone_title span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.phone_part_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_one_img {
  width: 100%;
  padding-bottom: 10px;
}
.phone_part_one_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_two_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.phone_part_two_img {
  width: 48%;
  padding: 5px 0;
}
.phone_part_two_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_three_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.phone_part_three_img {
  width: 32%;
  padding: 5px 0;
}
.phone_part_three_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_four_img:nth-of-type(3n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}

.phone_part_four_img:nth-of-type(3n + 2),
.phone_part_four_img:nth-of-type(3n + 3) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.phone_part_four_img img {
  width: 100%;
  border-radius: 8px;
}
.phone_part_five_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}
.phone_part_five_left {
  width: 49%;
  height: 100%;
  border-radius: 8px;
}
.phone_part_five_left_img {
  width: 100%;
  height: 100%;
  padding: 5px 0;
}
.phone_part_five_right {
  width: 49%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.phone_part_five_right_img {
  width: 100%;
  height: 50%;
  padding: 5px 0;
}
.phone_part_five_left_img img,
.phone_part_five_right_img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
/*****************修改头部***********************/
.transitionBody > div {
  overflow: auto;
}
.index_head {
  right: 10px;
  display: block;
}
.index_head:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.control_sanjiao::after {
  position: absolute;
  content: " ";
  top: 16px;
  left: -16px;
  display: block;
  width: 0;
  height: 0;
  border: 8px solid #f8f8f8;
  border-color: transparent #e0dbdb transparent transparent;
  z-index: 111;
}
.index_control {
  position: absolute;
  left: 400px;
}
.control_item {
  position: absolute;
  width: 630px;
  padding: 10px 10px 80px 10px;
  background-color: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  margin-top: 65px;
}
.img_nav {
  width: 200px;
  height: 100px;
  position: relative;
  padding: 1px;
  border: 1px solid #ddd;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone_shop {
  width: 100%;
  border: 1px solid transparent;
}
.phone_shop:hover {
  border: 1px dashed red;
}
.phone_shop_body {
  width: 95%;
  margin: 0 auto;
  position: relative;
}
.phone_title_shop {
  width: 95%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.phone_title_left {
  width: 70%;
}
.phone_title_left p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
  text-align: left;
}
.phone_title_left span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.phone_title_right {
  width: 30%;
}
.phone_title_right p {
  font-size: 18px;
  color: #cccccc;
  font-weight: bold;
  text-align: right;
}
.phone_shop_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.phone_shop_left,
.phone_shop_right {
  width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.phone_shop_item {
  width: 95%;
  border-radius: 5px;
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}
.shop_item_top {
  width: 100%;
}
.shop_item_top img {
  width: 100%;
}

.shop_item_title p {
  font-size: 12px;
  color: #000000;
  text-align: justify;
  text-justify: inter-character;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shop_item_title span {
  font-size: 12px;
  padding: 0 5px;
  background-color: #fd0036;
  border-radius: 5px;
  color: white;
}
.shop_item_label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.shop_item_label span {
  font-size: 12px;
  padding: 0 4px;
  margin: 5px 0;
  border-radius: 5px;
  border: 1px solid red;
  color: red;
}
.shop_item_label span:nth-of-type(1) {
  border: 1px solid #fc022f;
  color: #fc022f;
}
.shop_item_label span:nth-of-type(2) {
  border: 1px solid #fac831;
  color: #fac831;
}
.shop_item_label span:nth-of-type(3) {
  border: 1px solid #54b5e2;
  color: #54b5e2;
}
.shop_item_price {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 5px 0;
}
.shop_item_price p:nth-of-type(1) {
  font-size: 18px;
  color: #fc022f;
  font-weight: 400;
}
.shop_item_price p:nth-of-type(2) {
  font-size: 12px;
  color: #959595;
}
.hone_switch {
  width: 200px;
  /*height: 50px;*/
}
.el-switch__core {
  height: 30px;
  border-radius: 20px;
}
.el-switch__core:after {
  width: 27px;
  height: 27px;
}
.el-switch.is-checked .el-switch__core::after {
  left: 100%;
  margin-left: -26px;
}
.add {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
}
.phone_copyright {
  width: 100%;
  background-color: white;
  height: 50px;
  border: 1px solid transparent;
  position: relative;
}
.phone_copyright:hover {
  border: 1px dashed red;
}
.phone_copyright_box {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  font-size: 14px;
  color: #cccccc;
  letter-spacing: 2px;
}
.phone_bottom {
  width: 100%;
  background-color: white;
  height: 60px;
  border: 1px solid transparent;
  position: relative;
}
.phone_bottom:hover {
  border: 1px dashed red;
}
.phone_bottom_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
.phone_bottom_item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.phone_bottom_item_img {
  width: 25px;
}
.phone_bottom_item_img img {
  width: 100%;
}
.phone_bottom_item p {
  font-size: 12px;
  color: #7c7e82;
}
</style>